<template>
	<div class="map-nav">
		<el-menu
			:ellipsis="false"
			class="el-menu-popper-demo"
			mode="horizontal"
			:popper-offset="16"
		>
			<div class="logo" @click="flyToCenter">
				光
				<img src="../assets/images/定位.png" alt="" />
				谷
			</div>
			<slot></slot>
		</el-menu>
	</div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance()
let map = null
onMounted(() => {
	map = proxy.$map
})
/* 点击logo,飞行到中心点 */
const flyToCenter = () => {
	let center = [114.36, 30.5]
	map.getView().animate({
		center,
		zoom: 13.1,
		duration: 2000,
	})
}
</script>

<style scoped>
:global(.map-nav) {
	--el-menu-bg-color: #409eff;
	--el-menu-active-color: #fff;
}
.el-menu {
	position: fixed;
	width: 100vw;
	top: 0;
	z-index: 200;
	align-items: center;
	user-select: none;
	border: none;
	/* background: #6296ff; */
}
/* 深度选择器样式才生效 */
:deep(.el-menu--horizontal .el-menu-item) {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	height: inherit;
}
:deep(.el-menu--horizontal .el-menu-item):hover {
	color: #409eff;
	background: #fff;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title) {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title):hover {
	color: #409eff;
	background: #fff;
}
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
	border-bottom: 3px solid var(--el-menu-active-color);
	color: #fff !important;
	background: #409eff;
}
.logo {
	display: flex;
	margin: 0 20px;
	line-height: 36px;
	font-size: 24px;
	font-weight: 900;
	font-family: serif;
	cursor: pointer;
	color: #fff;
	text-shadow: 2px 2px 4px #ff0000;
}
img {
	width: 34px;
	height: 34px;
}
</style>
